<template>
  <div class="bannerbox">
    <div>
      <el-dialog
        title="添加合作伙伴"
        :visible.sync="dialogPartnerVisible"
        width="70%"
        :before-close="handleClose"
      >
        <br />
        <span class="tip">合作伙伴名称</span>
        <el-input
          v-model="inputTitle"
          style="width: 900px; margin-top: 10px; margin-left: 10px"
        ></el-input>
        <br />
        <span class="tip"> 添加图片logo</span>
        <el-input
          v-model="inputPic"
          style="width: 900px; margin-top: 10px; margin-left: 10px"
        ></el-input>
        <br />
        <span class="tip">添加网站地址</span>
        <el-input
          v-model="inputHttp"
          style="width: 900px; margin-top: 10px; margin-left: 10px"
        ></el-input>
        <el-button
          type="primary"
          style="width: 150px; margin-top: 10px"
          @click="submitPartner"
          >提交</el-button
        >
        <span slot="footer" class="dialog-footer" style="z-index: 30000">
          <el-button @click="dialogPartnerVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogPartnerVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <div class="banner-box">
      <el-button type="text" @click="dialogPartnerVisible = true"
        >添加合作伙伴</el-button
      >
      <el-table :data="tableData1" border style="width: 100%">
        <el-table-column prop="parid" label="编号" width="100">
        </el-table-column>
        <el-table-column prop="parname" label="伙伴名称" width="200">
        </el-table-column>
        <el-table-column prop="parlogo" label="logo" width="200">
        </el-table-column>
        <el-table-column prop="parhttp" label="网址" width="200">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.$index, scope.row)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="editor" v-if="isShow">
        <el-card class="box-card">
          <div>编辑</div>
          编辑名称<el-input
            v-model="inputEidtorParName"
            style="width: 600px; margin-top: 50px; margin-left: 10px;margin-bottom: 10px;"
          ></el-input
          ><br />
          编辑logo<el-input
            v-model="inputEidtorParLogo"
            style="
              width: 600px;
              margin-top: 10px;
              margin-bottom: 10px;
              margin-left: 10px;
            "
          ></el-input
          ><br />
          编辑网址<el-input
            v-model="inputEidtorParHttp"
            style="
              width: 600px;
              margin-top: 10px;
              margin-bottom: 10px;
              margin-left: 10px;
            "
          ></el-input
          ><br />
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="no">取消</el-button>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../../api";

export default {
  name: "Partner",
  data() {
    return {
      dialogPartnerVisible: false,
      tableData1: [],
      inputEidtorParName: "",
      inputEidtorParLogo: "",
      inputEidtorParHttp: "",
      isShow: false,
      ruleForm: "",
      codeId: "",
      inputTitle: "",
      inputHttp: "",
      inputPic: "",
    };
  },
  methods: {
    parHttp() {
      api.getSearchPartner({ search: "" }).then((res) => {
        this.tableData1 = res.data;
      });
    },
    handleClose() {},
    // 编辑
    handleClick(index, row) {
      this.isShow = !this.isShow;
      this.codeId = row.parid;
    },
    handleDelete(index, row) {
      console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api
            .getDeletePartner({
              id: row.parid,
            })
            .then((res) => {
              console.log(row.id);
              if (res.data.status === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.parHttp();
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //提交修改
    submitForm() {
      console.log(this.codeId,this.inputEidtorParName,this.inputEidtorParLogo,this.inputEidtorParHttp)
     api.getUpdatePartner({
       id:this.codeId,
       partnerName:this.inputEidtorParName,
       partnerLogo:"",
       partnerHttp:this.inputEidtorParHttp
     }).then((res)=>{
       console.log(res.data);
       this.isShow = false;

     })
      
    },
    // 取消
    no() {
      this.isShow = false;
    },
    //提交合作伙伴
    submitPartner() {
      console.log(this.inputTitle,this.inputPic,this.inputHttp,);
      api
        .getInsertPartner({
          partnerName: this.inputTitle,
          partnerLogo: this.inputPic,
          partnerHttp: this.inputHttp,
        })
        .then((res) => {
          console.log(res.data);
          this.dialogPartnerVisible=false
        });
  
    },
  },
  mounted() {
    this.parHttp();
  },
};
</script>

<style scoped>
.banner-btn {
  margin-left: -850px;
  margin-bottom: 20px;
  width: 150px;
  height: 40px;
  border-radius: 10px;
  outline: none;
}
.banner-box {
  position: absolute;
  top: 130px;
  left: 376px;
  width: 1000px;
  z-index: 200;
}
.edit {
  z-index: 50;
}
.tip {
  margin-left: -20px;
}
.content {
  width: 1022px;
  height: 50px;
  background: #d7d7d7;
  margin-left: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.content span {
  line-height: 50px;
  text-align: left;
}
.editor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(109, 108, 108, 0.5);
  z-index: 1000;
}
.box-card {
  position: absolute;
  margin: auto;
  top: 100px;
  left: 0;
  bottom: 0;
  right: 0;
  width: 1000px;
  height: 350px;
  margin: 0 auto;
}
</style>